<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Bugsby Tracking</title>
<link href="stylesheets/group1Site.css" rel="stylesheet" type="text/css">
<link rel="icon" href="graphics/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="graphics/favicon.ico" type="image/x-icon">
<script src="scripts/jquery-1.7.1.js"></script>
<script src="scripts/imageSwap.js"></script>
<script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<style>
form#inputForm {
	background: #9cbc2c;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	padding: 20px;
	width: 400px;
}
form#inputForm fieldset {
	border: none;
	margin-bottom: 10px;
}
form#inputForm fieldset:last-of-type {
	margin-bottom: 0;
}
form#inputForm legend {
	color: #384313;
	font-size: 16px;
	font-weight: bold;
	padding-bottom: 10px;
	text-shadow: 0 1px 1px #c0d576;
}
form#inputForm fieldset fieldset legend {
	color: #111111;
	font-size: 13px;
	font-weight: normal;
	padding-bottom: 0;
}
form#inputForm ol li {
	background: #b9cf6a;
	background: rgba(255,255,255,.3);
	border-color: #e3ebc3;
	border-color: rgba(255,255,255,.6);
	border-style: solid;
	border-width: 2px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	line-height: 30px;
	list-style: none;
	padding: 5px 10px;
	margin-bottom: 2px;
}
form#inputForm ol ol li {
	background: none;
	border: none;
	float: left;
}
form#inputForm label {
	float: left;
	font-size: 13px;
	width: 110px;
}
form#inputForm fieldset fieldset label {
	background:none no-repeat left 50%;
	line-height: 20px;
	padding: 0 0 0 30px;
	width: auto;
}
form#inputForm label[for=visa] {
	background-image: url(visa.gif);
}
form#inputForm label[for=amex] {
	background-image: url(amex.gif);
}
form#inputForm label[for=mastercard] {
	background-image: url(mastercard.gif);
}
form#inputForm fieldset fieldset label:hover {
	cursor: pointer;
}
</style>
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="wrapper">
  <div id="banner"> <img src="graphics/banner1.png" height="90" width="730" alt="bugsby logo"> </div>
  <!--End Banner -->
  <div id="leftcolumn">
    <div id="nav">
      <ul>
        <li><a href="index.html"><img src="graphics/home.ico" border=0 height="36" width="36" alt="home icon">&nbsp;Home</a></li>
        <li><a href="buglist.php"><img src="graphics/Spider.ico" border=0 height="36" width="36" alt="bug list icon">&nbsp;Bug List</a></li>
        <li><a href="buginfo.html"><img src="graphics/info.png" border=0 height="36" width="36" alt="Info">&nbsp;Info</a></li>
        <li><a href="bugmail.html"><img src="graphics/Gmail.png" border=0 height="36" width="36" alt="feedback icon">&nbsp;Contact</a></li>
      </ul>
    </div>
    <!-- End Nav id --> 
  </div>
  <!-- End leftcolumn -->
  
  <div id="content">
    <h1>Contact Bugsby</h1>
    <h2>Bugsby Depends on Your Feedback</h2>
    <p class="standardText"> Your feedback is greatly appreciated and will improve the free-to-use
      bug tracking community. Thank you taking the time to better the Bugsby experience! </p>
    <h2>Contact Form</h2>
    <p class="standardText"> Please fill in your first and last name in the following form, then
      click submit. This will allow us to estimate the total interested
      users for Bugsby. Again, thank you for your support! </p>
    <div id="feedback">
      <form name="inputForm" id="inputForm" action="bugmail.php" method="post">
        <fieldset>
          <legend>Contact Bugsby</legend>
          <ol>
            <li>
              <label for=name>Name*</label>
              <span id="sprytextfield1">
              <input name="fullname" type="text" id="fullname">
              <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg">Must be at least two characters.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span> </li>
            <li>
              <label for=email>Zipcode*</label>
              <span id="sprytextfield2">
              <input type="text" name="zipcode" id="zipcode">
              <span class="textfieldRequiredMsg">5-digit zipcode is required.</span><span class="textfieldInvalidFormatMsg">Invalid format: 5 digit zipcode is required.</span></span></li>
            <li>
              <label for=phone>Email*</label>
              <span id="sprytextfield3">
              <input type="text" name="email" id="email">
              <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid email format.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span></span></li>
            <li>
              <label for=address>Comments</label>
              <textarea id="siteComments" name="siteComments" rows=5 required></textarea>
            </li>
          </ol>
        </fieldset>
        <input type="hidden" name="submitted" value="1">
        <div id="inputFormSubmit">
          <input type="submit" value="Submit">
          <input type="reset">
        </div>
        <p>Fields indicated by an * are required</p>
      </form>
    </div>
    <!-- End feedback --> 
  </div>
  <!-- End content -->
  <hr>
  <div id="navGraphics">
    <h2>Click on a Graphic to Choose an Option:</h2>
    <table width="800" border="0">
      <tr>
        <td><a href="index.html"><img src="graphics/home.png" border=0 height="128" width="128" alt="homepage icon" rel="graphics/homeRed.png" class="rollover" /></a></td>
        <td><a href="buglist.php"><img src="graphics/Spider.png" border=0 height="128" width="128" alt="view bug icon" rel="graphics/SpiderRed.png" class="rollover" /></a></td>
        <td><a href="buginfo.html"><img src="graphics/info.png" border=0 height="128" width="128" alt="information icon" rel="graphics/infoRed.png" class="rollover" /></a></td>
      </tr>
      <tr>
        <td class="standardText">Bugsby Home</td>
        <td class="standardText">View Bug Report</td>
        <td class="standardText">Information</td>
      </tr>
    </table>
  </div>
  <div id="footer"> Site Content: <a href="mailto:cs633group1@gmail.com">CS633 Group 1</a> </div>
  <!-- End Footer --> 
</div>
<!-- End Wrapper --> 
<script type="text/javascript">
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "none", {minChars:2, maxChars:50, validateOn:["blur"]});
var sprytextfield2 = new Spry.Widget.ValidationTextField("sprytextfield2", "zip_code", {validateOn:["blur"]});
var sprytextfield3 = new Spry.Widget.ValidationTextField("sprytextfield3", "email", {validateOn:["blur"], minChars:2});
</script>
</body>
</html>
